<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>es6 new features</title>    
    <link href="css/layout.css" rel="stylesheet">
    <link href="css/shCore.css" rel="stylesheet">
    <link href="css/shCoreEclipse.css" rel="stylesheet">	
</head>
<body>
	<nav id="tags"><div class="pin active">&nbsp;</div></nav> 
	<div id="wrapper"> 
		<h1>ECMAScript 6 new feature</h1> 
		<section>
			<h2>const, let</h2>
			<ul>
                <li>	
                    <div class="box">
                        <pre class="brush:js">
                            const FLAG = true;
                            
                            FLAG = false;               // error, read only

                            console.log(FLAG);          // true
                        </pre>
                    </div>					
                    <div class="box">
                        <pre class="brush:js">
                            no const in ES5
                        </pre>
                    </div>
                </li>
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            for (let i = 0; i < 10; i++) {
                                // ...
                            }

                            console.log(i);   // ReferenceError
                        </pre>
                    </div>
                    <div class="box">
                        <pre class="brush:js">
                            for (var i = 0; i < 10; i++) {
                                // ...
                            }

                            console.log(i);   // 10
                        </pre>
                    </div>
                </li>
            </ul>
		</section>
		
			
		<section>
			<h2>template strings</h2>
			<ul>
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            let r = Math.random();
                            console.log(`this is a random num: ${r}`);
                        </pre>
                    </div>
                    <div class="box">
                        <pre class="brush:js">
                            var r = Math.random();
                            console.log("this is a random num: " + r);
                        </pre>
                    </div>				
                </li>
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            let o = {x: 1, y: 2};
                            console.log(`${o.x + o.y}`);  // 3
                        </pre>
                    </div>
                </li>
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            function fn() {
                                return "hello, world!";
                            }

                            console.log(`${fn()}`);      // hello, world!
                        </pre>
                    </div>
                </li>
            </ul>
		</section>
		
		<section>
			<h2>parameter default values</h2>
			<ul>
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            function fn(x, y = 1, z = 2) {
                                console.log(`${x} ${y} ${z}`);
                            }

                            fn(100); 		   // 100 1 2
                            fn(100, 300);      // 100 300 2
                            fn(100, 300, 500); // 100 300 500
                        </pre>
                    </div>
                    <div class="box">
                        <pre class="brush:js">
                            function fn(x, y, z) {
                                var xx = x,
                                    yy = y || 1,
                                    zz = z || 2;

                                console.log(xx + " " + yy + " " + zz);
                            }

                            fn(100); 		   // 100 1 2
                            fn(100, 300);      // 100 300 2
                            fn(100, 300, 500); // 100 300 500
                        </pre>
                    </div>
                </li>	
            </ul>
		</section>
		
		<section>
			<h2>enhanced object literals</h2>
			<ul>
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            let one = 1;
                            let o = {
                                one,							
                                fn() {
                                    return 1;
                                },							
                                ["key" + one]: 1,
                                ["fn" + one]() {
                                    return 1;
                                }
                            }
                        </pre>
                    </div>
                    <div class="box">
                        <pre class="brush:js">
                            var one = 1;
                            var o = {
                                one: one,							
                                fn: function() {
                                    return 1;
                                },							
                                key1: 1,
                                fn1: function() {
                                    return 1;
                                }
                            }
                        </pre>
                    </div>
                </li>	
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            function fn() {
                                let x = 1,
                                    y = 10;

                                return {x, y};
                            }
                        </pre>
                    </div>
                    <div class="box">
                        <pre class="brush:js">
                            function fn() {
                                var x = 1,
                                    y = 10;

                                return {
                                    x: x,
                                    y: y
                                };
                            }
                        </pre>
                    </div>
                </li>	
            </ul>
		</section>
		
		<section>
			<h2>fat arrow</h2>
			<ul>
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            (a) => a * a;
                        </pre>
                    </div>
                    <div class="box">
                        <pre class="brush:js">
                            function(a) {
                                return a * a;
                            }
                        </pre>
                    </div>
                </li>
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            let arr = [1, 8, 2, 9, 3];
                            arr.forEach(v => console.log(v));
                        </pre>
                    </div>
                    <div class="box">
                        <pre class="brush:js">
                            var arr = [1, 8, 2, 9, 3];
                            arr.forEach(function(v) {
                                console.log(v);
                            });
                        </pre>
                    </div>
                </li>
            </ul>
		</section>
		
	
		<section>
			<h2>for-of iterator</h2>
			<ul>
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            let arr = ["a", "b", "c"];

                            for (v of arr) {
                                console.log(v);
                            }
                        </pre>
                    </div>
                    <div class="box">
                        <pre class="brush:js">
                            var arr = ["a", "b", "c"];

                            arr.forEach(function(v) {
                                console.log(v);
                            });
                        </pre>
                    </div>				
                </li>
            </ul>
		</section>
	
		<section>
			<h2>class</h2>
			<ul>
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            class Person {
                                constructor(name, age) {
                                    this.name = name;
                                    this.age = age;
                                }

                                introduce() {
                                    console.log(this.name + ", " + this.age);
                                }
                            }


                            let p = new Person("ss", 28);
                            p.introduce();
                        </pre>
                    </div>
                    <div class="box">
                        <pre class="brush:js">
                            function Person(name, age) {
                                this.name = name;
                                this.age = age;
                            }

                            Person.prototype.introduce = function() {
                                console.log(this.name + ", " + this.age);
                            }

                            var p = new Person("ss", 28);
                            p.introduce();
                        </pre>
                    </div>						
                </li>
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            class Programmer extends Person {
                                constructor(name, age, goodAt) {
                                    super(name, age);
                                    this.goodAt = goodAt;
                                }

                                // override
                                introduce() {
                                    super.introduce();
                                    console.log("i am good at " + this.goodAt);
                                }
                            }					

                            let p = new Programmer("ss", 28, "c++");
                            p.introduce();
                        </pre>
                    </div>
                    <div class="box">
                        <pre class="brush:js">
                            function Programmer(name, age, goodAt) {
                                Person.call(this, name, age);
                                this.goodAt = goodAt;
                            }

                            Programmer.prototype = new Person();

                            Person.prototype.introduce = function() {      
                                console.log(this.name + ", " + this.age);  
                                console.log("i am good at " + this.goodAt);
                            }

                            var p = new Programmer("ss", 28, "c++");
                            p.introduce();
                        </pre>
                    </div>						
                </li>
            </ul>
		</section>
	
		<section>
			<h2>module</h2>
			<ul>
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            // math.js
                            export function sum(x, y) {
                                return x + y;
                            }

                            export var pi = 3.14159265387;
                        </pre>
                    </div>			
                </li>
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            // test.js
                            import {sum, pi} from math;
                            let r = 10;
                            console.log(sum(r, pi));
                        </pre>
                    </div>			
                </li>
            </ul>
		</section>
		
		<section>
			<h2>destructuring assignment</h2>
			<ul>
                <li>									
                    <div class="box">
                        <pre class="brush:js">
                            let [a, b, c] = [1, 2, 3];
                        </pre>
                    </div>
                    <div class="box">
                        <pre class="brush:js">
                            var a = 1,
                                b = 2,
                                c = 3;
                        </pre>
                    </div>
                </li>
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            let [ , , third] = ["foo", "bar", "baz"];

                            console.log(third); // "baz"
                        </pre>
                    </div>
                </li>
                <li>
                    <div class="box">
                        <pre class="brush:js">					
                            let [head, ...tail] = [1, 2, 3, 4];

                            console.log(head); // 1
                            console.log(tail); // [2, 3, 4]				</pre>
                    </div>
                </li>
                <li>
                    <div class="box">
                        <pre class="brush:js">						
                            let [foo] = undefined;  // error: rhs should be an ObjectLiteral or an ArrayLiteral
                            let [foo] = null;		// error: same reason</pre>
                    </div>
                </li>
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            var [foo = true] = [];

                            console.log(foo);                // true

                            [x, y = "b"] = ["a"]             // x = "a", y = "b"
                            [x, y = "b"] = ["a", undefined]  // x = "a", y = "b"
                        </pre>
                    </div>
                </li>
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            let {foo, bar} = {foo: "aaa", bar: "bbb"};
                            console.log(foo); // "aaa"
                            console.log(bar); // "bbb"
                        </pre>
                    </div>
                </li>
            </ul>
		</section>
		
			
		<section>
			<h2>rest array</h2>
			<ul>
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            function fn(i, j, ...r) {
                                return r.slice(i, j);
                            }
                        </pre>
                    </div>
                </li>
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            function sum(...x) {
                                return x.reduce((m, n) => m + n);
                            }

                            console.log(sum(1, 2, 3));       // 6
                            console.log(sum(1, 2, 3, 4, 5)); // 15
                        </pre>
                    </div>
                </li>
            </ul>
		</section>
		
		<section>
			<h2>spread array</h2>
			<ul>
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            let people = ["a", "b", "c"];

                            function hello(p1, p2, p3){
                                console.log(`Hello ${p1}, ${p2}, ${p3}`);
                            }

                            sayHello(...people);    // Hello a, b, c 
                        </pre>
                    </div>
                    <div class="box">
                        <pre class="brush:js">
                            var people = ["a", "b", "c"];

                            function hello(p1, p2, p3){
                                console.log("Hello " + p1 + ", " + p2 + ", " + p3);
                            }

                            sayHello.apply(null, people);    // Hello a, b, c 
                        </pre>
                    </div>
                </li>	
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            let arr1 = [0, 1, 2],
                                arr2 = [3, 4, 5];

                            arr1.push(...arr2);
                        </pre>
                    </div>
                    <div class="box">
                        <pre class="brush:js">
                            var arr1 = [0, 1, 2],
                                arr2 = [3, 4, 5];

                            Array.prototype.push.apply(arr1, arr2);
                        </pre>
                    </div>
                </li>
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            let arr1 = [0, 1, 2],
                                arr2 = [3, 4, 5],

                                merge = [9, ...arr1, 8, 7, ...arr2];  // [9, 0, 1, 2, 8, 7, 3, 4, 5];
                        </pre>
                    </div>
                </li>	
            </ul>
		</section> 
		
		
		<section>
			<h2>map, set</h2>
			<ul>
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            let m = new Map();
                            m.set(key, value);
                            m.has(key);
                            m.get(key);
                            m.clear();
                            m.delete(key);
                            m.keys();
                        </pre>
                    </div>				
                </li>
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            let s = new Set();
                            s.add("hi")
                             .add("i am a set")
                             .add("in es6");

                            console.log(s.size); 	   // 3
                            console.log(s.has("hi"));  // true
                        </pre>
                    </div>				
                </li>
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            let arr = [1, 2, 3, 4, 5, 5, 4, 3, 2];
                                s = new Set();

                            arr.map(x => s.add(x));
                            arr = Array.from(s);              // [1, 2, 3, 4, 5]
                        </pre>
                    </div>				
                </li>
            </ul>
		</section>
		
		<section>
            <h2>promise</h2>
            <ul>
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            let promise = new Promise(function(resolve, reject) {
                                // do something for a long time

                                if (/* success */) {
                                    resolve("stuff worked!");
                                } else {
                                    reject(Error("it broke"));
                                }
                            });

                            // bind
                            promise.then(function(result) {
                                console.log(result); 	// "stuff worked!"
                            }, function(err) {
                                console.log(err); 		// Error: "it broke"
                            });
                        </pre>
                    </div>				
                </li>
            </ul>
        </section>
		
        <section>
    		<h2>generators</h2>
    		<ul>
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            function * hello() {
                                yield 1;
                                yield 2;
                            }

                            let h = hello();      // h is a generator
                            let a = h.next();     // a: Object {value: 1, done: false}
                            let b = h.next();     // b: Object {value: 2, done: false} 
                            let c = h.next();     // c: Object {value: undefined, done: true}
                        </pre>
                    </div>				
                </li>
            </ul>
    	</section>
	
	
    	<section>
    		<h2>new API of Array</h2>
            <ul>
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            // Array.from:
                            // lis is something like array, but not a true array
                            let lis = document.querySelectorAll("li");					
                            Array.from(lis).forEach((li) => console.log(li));

                            // Array.of
                            let arr = Array.of(1, 3, 8, 999);       // [1, 3, 8, 999]

                            // find &amp; findIndex
                            [1, 5, 10, 15].find(function(value, index, arr) {
                                return value > 9;
                            }); // 10

                            [1, 5, 10, 15].findIndex(function(value, index, arr) {
                                return value > 9;
                            }) // 2

                            // fill
                            ['a', 'b', 'c'].fill(7); 		// [7, 7, 7]
                            new Array(3).fill(7);			// [7, 7, 7]

                            // entries(), keys(), values()
                            for (let index in ["a", "b"].keys()) {
                                console.log(index);
                            };  // 0 1

                            for (let element in ["a", "b"].values()) {
                                console.log(element);
                            };  // "a" "b"

                            for (let [index, element] of ["a", "b"].entries()) {
                                console.log(index, element);     // 0 "a"
                            }                                    // 1 "b"



                            // includes()
                            [1, 2, 3].includes(2);     // true
                            [1, 2, 3].includes(4);     // false
                            [1, 2, NaN].includes(NaN); // true

                            [1, 2, 3].includes(3, 3);  // false
                            [1, 2, 3].includes(3, -1); // true

                            // array comprehension
                            let a1 = [1, 2, 3, 4],
                                a2 = [for (i of a1) i * 2];    // a2 is [2, 4, 6, 8]

                            let years = [1954, 1974, 1990, 2006, 2010];
                            [for (year in years) if (year > 2000) year]; // [2006, 2010]
                        </pre>
                    </div>
                    <div class="box">
                        <pre class="brush:js">
                            &nbsp;
                            &nbsp;
                            &nbsp;
                            &nbsp;
                            &nbsp;

                            var a = Array(),          // []
                                b = Array(3),         // [undefined, undefined, undefined]
                                c = Array(3, 11, 8);  // [3, 11, 8]
                        </pre>
                    </div>
                </li>
            </ul>
        </section>
	
    	<section>
    		<h2>new API of String</h2>
    		<ul>
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            let s = "Hello world!";
                            s.startsWith("hell");             // true
                            s.endsWith("!");                  // true
                            s.includes("wor");                // true

                            s.startsWith("world", 6);         // true
                            s.endsWith("Hello", 5);           // true
                            s.includes("Hello", 6);           // false

                            s = "js";
                            s.repeat(3);                      // jsjsjs
                            // ...
                        </pre>
                    </div>	
                </li>
            </ul>
    	</section>
	
        <section>
    		<h2>new API of Object</h2>
    		<ul>
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            // Object.is()
                            Object.is(+0, -0);    // false
                            Object.is(NaN, NaN);  // true

                            // Object.assign()
                            let t  = { a: 1 },
                                s1 = { b: 2 },
                                s2 = { c: 3 };

                            Object.assign(t, s1, s2);  // t is {a: 1, b: 2, c: 3}

                            // Object.setPrototypeOf()
                            // Object.getPrototypeOf()

                        </pre>
                    </div>
                    <div class="box">
                        <pre class="brush:js">
                            // Object.is() just like "===", 
                            +0 === -0;            //true
                            NaN === NaN;          // false
                        </pre>
                    </div>
                </li>
            </ul>
    	</section>
	
    	<section>		
    		<h2>new API of Math</h2>
    		<ul>		
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            Math.trunc(4.1);               // 4
                            Math.trunc(4.9);               // 4
                            Math.trunc(-4.1);              // -4
                            Math.trunc(-4.9);              // -4

                            Math.sign(-5);                 // -1
                            Math.sign(5);                  // +1
                            Math.sign(0);                  // +0
                            Math.sign(-);                  // -0
                            Math.sign(NaN);                // NaN

                            Math.log2(8);                  // 3
                            Math.log10(100);			   // 2

                            // ...
                        </pre>
                    </div>	
                </li>
    		</ul>
        </section>
		
    	<section>
    		<h2>new API of Number</h2>
    		<ul>
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            let octal = 0o700,          // 448
                                binary = 0b1010;        // 10

                            Number.isFinite(15);        // true
                            Number.isFinite(0.8);       // true
                            Number.isFinite(NaN);       // false
                            Number.isFinite(Infinity);  // false
                            Number.isFinite(-Infinity); // false
                            Number.isFinite("foo");     // false
                            Number.isFinite("15");      // false
                            Number.isFinite(true);      // false

                            Number.isNaN(NaN);          // true
                            Number.isNaN(15);           // false
                            Number.isNaN("15");         // false
                            Number.isNaN(true);         // false

                            // parseInt &amp; parseFloat moved to Number
                            Number.parseInt("12.34");   // 12
                            Number.parseFloat("12.34"); // 12.34

                            // 25.0 is as same as 25 in Javascript
                            Number.isInteger(25)        // true
                            Number.isInteger(25.0)      // true
                            Number.isInteger(25.1)      // false
                            Number.isInteger("15")      // false
                            Number.isInteger(true)      // false
                        </pre>
                    </div>
                    <div class="box">
                        <pre class="brush:js">
                            isFinite(15);               // true
                            // "15" will comvert to 15 first in es5
                            isFinite("15");             // true

                            isNaN(NaN)                  // true
                            // "NaN" will comvert to NaN first in es5
                            isNaN("NaN")                // true
                        </pre>
                    </div>
                </li>		
            </ul>
    	</section>

    	<section>
    		<h2>unavailble now(2015-03-20)</h2>
    		<ul>
                <li>
                    <div class="box">
                        <pre class="brush:js">
                            WeakSet
                            WeakMap
                            Symbol
                            well-known symbols

                            // ========================
                            Proxy
                            TypeArrays
                            Reflect
                        </pre>
                    </div>
                </li>
            </ul>
    	</section>	
	
	</div>	
    <script src="js/jquery-2.1.3.min.js"></script> 
    <script src="js/shCore.js"></script>
    <script src="js/shBrushJScript.js"></script>
	<script src="js/app.js"></script> 
</body>
</html>
